import { MyGameObject } from '/static/js/MyGameObject/base.js';
import { Controller } from '/static/js/Controller/base.js';

export class GameMap extends MyGameObject {
    // 类的构造函数，在创建GameMap类的实例时会被调用，接收一个参数root(即MyGameObject对象)
    constructor(root) {
        // 调用父类（MyGameObject）的构造函数，确保父类的初始化逻辑能够正常执行
        super();
        // 将传入的参数root赋值给当前类实例的root属性
        this.root = root;
        // 使用jQuery的操作方式，创建一个新的<canvas> HTML元素，设置其宽度为1280像素，高度为720像素，并设置tabindex属性为0，方便后续获取焦点等操作
        // 这里将创建的<canvas>元素对象赋值给当前类实例的$canvas属性，方便后续对这个canvas元素进行各种操作
        this.$canvas = $('<canvas width="1280" height="720" tabindex=0></canvas>');
        // 获取<canvas>元素的2D绘图上下文对象，通过访问$canvas对象中实际的DOM元素（使用[0]索引，这也是类似jQuery操作获取原生DOM元素的常见方式），再调用getContext('2d')方法来获取。
        // 将获取到的绘图上下文对象赋值给当前类实例的ctx属性，后续就可以使用这个ctx属性来在canvas上进行绘图相关的操作，比如绘制图形、清除区域等
        this.ctx = this.$canvas[0].getContext('2d');
        // 将创建好的<canvas>元素添加到this.root.$kof所指向的DOM元素内部（这里$kof是MyGameObject对象的一个属性，指向一个DOM元素，用于承载这个canvas元素），使其在页面上显示出来
        this.root.$kof.append(this.$canvas);
        // 让<canvas>元素获取焦点，是为了后续接收键盘事件
        this.$canvas.focus();

        // 创建一个 Controller 实例，用于处理用户输入（如键盘事件）
        // 将 $canvas 元素传递给 Controller，以便它可以监听 canvas 上的事件
        this.controller = new Controller(this.$canvas);

        // 在 $kof 元素中添加一个头部区域，用于显示游戏信息（如玩家血量、计时器等）
        this.root.$kof.append($(`
            <div class="kof-head">
                <div class="kof-head-hp-0">
                    <div><div></div></div>
                </div>
                <div class="kof-head-timer">60</div>
                <div class="kof-head-hp-1">
                    <div><div></div></div>
                </div>
            </div>
        `));

        this.time_left = 60000;
        this.$timer = this.root.$kof.find(".kof-head-timer");
    }

    start() {

    }

    // update方法，每一帧都会被调用，用于更新游戏状态
    update() {
        // 减少剩余时间
        this.time_left -= this.timedelta;
        // 如果时间小于0，重置为0
        if (this.time_left < 0) {
            this.time_left = 0;
            // 获取两个玩家对象
            let [a, b] = this.root.players;
            // 如果两个玩家都不处于状态6（假设状态6为游戏结束状态），则设置他们的状态为6，并重置一些属性
            if (a.status !== 6 && b.status !== 6) {
                a.status = b.status = 6;
                a.frame_current_cnt = b.frame_current_cnt = 0;
                a.vx = b.vx = 0;
            }
        }
        // 更新计时器显示
        this.$timer.text(parseInt(this.time_left / 1000));

        // 调用render方法进行渲染
        this.render();
    }

    // 定义render方法，用于在canvas上进行实际的渲染操作。
    // 这里调用了绘图上下文对象（this.ctx）的clearRect方法，用于清除整个canvas画布的内容，参数分别指定了清除矩形区域的左上角坐标（0, 0）以及矩形的宽度和高度（使用canvas的宽度和高度属性），
    // 这样每次渲染前先清除上一次的画面内容，以便绘制新的内容，实现画面的动态更新效果
    render() {
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    }
}